<template>
    <!-- 
      v-for 指令：用于基于源数据渲染列表
      语法：v-for="(item, index) in list"
        - item：当前遍历到的元素
        - index：当前元素的索引（从0开始）
        - list：要遍历的源数据（数组）
      
      :key 属性：
        - 为每个列表项提供唯一标识，帮助Vue高效更新DOM
        - 这里使用index作为key（简单场景可用，复杂场景建议用唯一ID）
    -->
    <div v-for="(item, index) in list" :key="index">
        <!-- 显示当前元素的索引和值 -->
        索引：{{index}}---元素：{{item}}
    </div>
</template>

<script setup>
// 导入reactive函数，用于创建响应式对象/数组
import { reactive } from 'vue'

// 创建响应式数组list，包含三个姓名元素
// reactive适用于复杂数据类型（对象/数组）的响应式处理
const list = reactive([
    '张三',
    '李四',
    '王五'
])

/* 
  列表渲染说明：
  1. v-for会遍历数组中的每个元素，为每个元素创建一个对应的DOM节点
  2. 当数组发生变化（添加/删除/修改元素）时，Vue会自动更新DOM
  3. :key是必须的，它帮助Vue识别每个节点的身份，优化重排性能
  4. 此处使用index作为key，适合简单静态列表；动态列表建议使用数据中唯一的id作为key
*/
</script>
    